<Home-Content-Tpl>
  <span home-title>创建公示</span>
  <ng-container home-toolbar>

    <button class="publish-button"
            (click)="publish()"
            mat-raised-button>发布
    </button>
    <button mat-icon-button>
      <mat-icon>icon_name</mat-icon>
    </button>
    <button mat-icon-button
            [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu"
              xPosition="before">
      <button mat-menu-item>
        <mat-icon>delete</mat-icon>
        <span>清空</span>
      </button>
    </mat-menu>
  </ng-container>
  <div home-main>
    <mat-form-field>
      <input matInput
             placeholder="标题"
             [(ngModel)]="publication.title"
             [maxLength]="20"
             required
             value="">
    </mat-form-field>
    <mat-form-field class="pubtype-select">
      <mat-select placeholder="选择公示类型"
                  [(ngModel)]="publication.type"
                  name="item">
        <mat-option value="info">公示</mat-option>
        <mat-option value="act">活动</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field class="pubtype-select">
      <mat-select placeholder="选择优先等级"
                  [(ngModel)]="publication.priority"
                  name="item">
        <mat-option value="NORMAL">一般</mat-option>
        <mat-option value="LOW">低</mat-option>
        <mat-option value="MEDIUM">中</mat-option>
        <mat-option value="HIGH">高</mat-option>
      </mat-select>
    </mat-form-field>
    <br>
    <mat-expansion-panel class="summary-expand">
      <mat-expansion-panel-header>
        摘要(可选)
      </mat-expansion-panel-header>
      <mat-form-field [ngStyle]="{'font-size': 14,'width':'80%'}">
        <mat-label>摘要内容</mat-label>
        <textarea #autosize="cdkTextareaAutosize"
                  matInput
                  [(ngModel)]="publication.summary"
                  [maxLength]="50"
                  cdkTextareaAutosize
                  cdkAutosizeMinRows="3"
                  cdkAutosizeMaxRows="8">
                </textarea>
      </mat-form-field>
    </mat-expansion-panel>
    <br>
    <mat-chip>正文</mat-chip>
    <ckeditor #theEditor
              [editor]="Editor"
              [config]="editorConfig"
              [(ngModel)]="publication.content"
              (ready)="onEditorReady($event)">
    </ckeditor>
    <br><br>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        预览
      </mat-expansion-panel-header>
      <div class="preview-area"
           [innerHtml]="richTextContent | safeHTML">
      </div>
    </mat-expansion-panel>
  </div>
</Home-Content-Tpl>
